<template>
	<view class="a_head">
		<!-- 头像 -->
		<view  class="a_avatar"  @click.stop="gotoUserHome">
			<u-avatar :src="data.poster.avatar" mode="aspectFill"></u-avatar>
		</view>


		<!-- 昵称 -->
		<view class="a_user_info" @click.stop="gotoUserHome">
			<view class="a_user_nick_box">
				<text class="a_user_nick">{{data.poster.displayName}}</text>
			</view>

			<!-- 发布时间 -->
			<view class="a_user_des">
				<text class="a_lasttime">{{data.createdDate | formatDate}}</text>
			</view>
		</view>

		<view style="flex: 1;"></view>

		<!-- 是否已关注 -->
		<view class="a_btns" v-if="showFollowBtn && !isCurrentUser" @click.stop="followClick()">
			<u-button v-if="data.poster.followed === true" plain shape='circle' size="mini"   text="已关注">
			</u-button>
			<u-button v-if="data.poster.followed === false"  plain shape='circle' size="mini" type="primary" text="+ 关注">
			</u-button>
		</view>

	</view>
</template>

<script>
	export default {
		name: "posterInfo",
		props: {
			// 数据对象
			data: {
				type: Object,
				default () {
					return {
						id: '',
						createdDate: '',
						// 发帖人
						poster: {}
					}
				}
			},
			// 是否展示关注按钮
			showFollowBtn:{
				type: Boolean,
				default(){
					return true
				}
			},
			// 是否禁止前往主页
			disableToHome:{
				type: Boolean,
				default(){
					return false
				}
			},
		},
		computed: {
			getUsername() {
				let u = this.$store.state.user
				return u&&u.info?u.info.username:null
			},
			isCurrentUser(){
				let u = this.$store.state.user
				if(!u || !u.info || !u.info.username){
					return false
				}
				return this.data.poster.username == u.info.username
			}
		},
		data() {
			return {
				doing: false
			}
		},	
		methods: {
			// 前往详情
			gotoUserHome() {
				if(this.disableToHome){
					return
				}
				let url = '/pages/center/homePage?id='+this.data.poster.username
				if (this.getUsername == this.data.poster.username){
					url =  '/pages/center/userHomePage'
				}
				uni.navigateTo({
					url: url
				})
			},
			// 关注点击事件
			followClick(){
				if(this.data.poster.followed === true){
					this.cancelFollow()
				}else if(this.data.poster.followed === false) {
					this.doFollow()
				}
			},
			doFollow(){
				if(this.doing){
					return false
				}
				this.doing = true
				this.$httpApi.baseUserPost('follow/'+this.data.poster.username,{}).then(({ data }) => {
					if (data.code == "000000" && data.data === 1) {
						this.data.poster.followed = true				
					}
					this.doing = false
				}).catch(err => {
					this.doing = false
				})
			},
			cancelFollow(){
				if(this.doing){
					return false
				}
				this.doing = true
				this.$httpApi.baseUserDelete('follow/'+this.data.poster.username,{}).then(({ data }) => {
					if (data.code == "000000" && data.data === 1) {
						this.data.poster.followed = true				
					}
					this.doing = false
				}).catch(err => {
					this.doing = false
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.a_head {
		display: flex;
		flex: 1;
		flex-direction: row;
		margin-bottom: 10px;
	}

	.a_avatar {
		margin-right: 4px;
	}


	.a_user_info {
		flex-direction: column;
	}

	.a_user_nick_box {
		flex: 1;
		flex-direction: row;
		margin: 0 4px 0 0;
		align-items: center;
	}

	.a_user_nick {
		font-size: 14px;
		color: #333333;
	}


	.a_user_des {
		flex: 1;
		flex-direction: row;
		align-items: center;
	}

	.a_lasttime {
		font-size: 12px;
		color: #999999;
	}

	// 关注按钮
	.a_btns {
		margin-top: 3px;
		align-items: center;
		flex-direction: row;
		border: #007AFF 1px;
	}
</style>
